<template>
    <div>
        <n-form :label-width="80" ref="formRef">
            <n-space class="center-picker-container">
                <n-form-item style="" label="选择查询时间" label-width="80">
                    <n-date-picker v-model:value="timestamp" type="date"/>
                    <n-button @click="handle">确定</n-button>
                </n-form-item>
            </n-space>
        </n-form>
        <div class="leftCard">
            <div id="chinaMap" ref="chinaMap"></div>
        </div>
    </div>
    
</template>
    
<script setup lang="ts" name="ChinaMap">
    import {onMounted, onBeforeUnmount, ref} from 'vue';
    import * as echarts from 'echarts';
    import china from "./china.json";  //中国地图
    import { debounce } from 'lodash-es';
    import { getChinaMap } from '@/api/dataInfo/flightInfo';

    const timestamp = ref(1496246400000)
    const chinaMap = ref()
    var myChart = {} as any
    const resize = debounce(() => myChart && myChart.resize(), 200)

    const chinaMapJson : any = china;
    echarts.registerMap('china',chinaMapJson) //这个特别重要

    interface DataItem {
        province: string;
        count: number;
    }
    async function handle(){
        const response = await getChinaMap(timestamp.value,"D");
        console.log(response);
        state.value = response;
        
        // 使用 map 方法将字符串转换为数字
        const valuesArray = response.map(item => item.count);
        //console.log(valuesArray);
        // 使用 Math.max 获取数组中的最大值
        const maxValue = Math.max(...valuesArray);
        //console.log(maxValue);
        // 使用 Math.max 获取数组中的最大值
        initEchartMap(maxValue);
    }

    const state = ref<DataItem[]>([]);
    onMounted(async () => {
        const response = await getChinaMap(timestamp.value,"D");
        console.log(response);
        state.value = response;
        
        // 使用 map 方法将字符串转换为数字
        const valuesArray = response.map(item => item.count);
        //console.log(valuesArray);
        // 使用 Math.max 获取数组中的最大值
        const maxValue = Math.max(...valuesArray);
        //console.log(maxValue);
        // 使用 Math.max 获取数组中的最大值
        initEchartMap(maxValue);
    })

    // 在组件中使用这个自定义类型
    // const props = defineProps({
    // areadataInfo: {
    //         type: Array as PropType<DataItem[]>, // 使用 PropType 包装自定义类型
    //         default: () => []
    //     }
    // });

    // watch(() => props.areadataInfo,
    //     (newProps) => {
    //         if (newProps) {
    //             state.value = newProps
    //             const maxNum = Math.max(100)
    //             nextTick(() => {
    //                 initEchartMap(maxNum );
    //             });
    //         }
    //     },
    //     { immediate: true, deep: true }
    // );
    const emit = defineEmits(['MaphospitalRecommend']);
    
    onMounted (() => {
        window.addEventListener('resize', resize);
    })
    
    onBeforeUnmount(() => {
        window.removeEventListener('resize', resize);
    })
    
    // 初始化地图
    function initEchartMap(maxNum){
        //console.log(state.value);
        //console.log(1);

        if (myChart != null && myChart != "" && myChart != undefined) {
            echarts.dispose(chinaMap.value)
        }
        myChart = echarts.init(chinaMap.value);
        myChart.off('click');
        //echart 配制option  
        var options= {
            tooltip: { // 鼠标移到图里面的浮动提示框
            // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
                formatter(params, ticket, callback) {
                    // params.data 就是series配置项中的data数据遍历
                    //console.log(state.value);
                    //console.log(2);
                    //console.log(params.data);
                    let Count;
                    let areaName;
                    //console.log(params.data.name);
                    if (params.data) {
                        Count = params.data.value;
                        areaName = params.data.name;
                    } else {// 为了防止没有定义数据的时候报错写的
                        Count = 0;
                    }
                    let htmlStr = `<div style='font-size:14px; margin-bottom:10px;'> ${areaName ? areaName : params.name}</div>
                        <p style='text-align:left;margin-top:-4px;'>飞往该地的飞机数量:${Count}
                        </p>`;
                    return htmlStr;
                },
                backgroundColor: "#ff7f50", //提示标签背景颜色
                textStyle: { color: "#fff" }, //提示标签字体颜色
                padding: [5, 10, 0, 10],  // 设置上下的内边距为 5,0，左右的内边距为 10
            },
            visualMap: {  
                show: true,
                bottom: 270,
                // left: 50, top: '30%', right: 0, bottom: 0,  //定位的左上角以及右下角分别所对应的经纬度
                text: ['高', '低'],
                min: 0,
                max: maxNum,
                itemHeight: 500,  //图形的高度，即长条的高度。
                inRange : {
                    color: [
                        '#91cc75',//浅绿
                        '#fac858',//黄色
                        '#fc8452',//橙色
                        '#ee6666',//红色
                    ],
                },
                calculable : true,

            },    
            geo: {  // 地理坐标系组件用于地图的绘制// geo配置详解： https://echarts.baidu.com/option.html#geo
                map: "china", // 表示中国地图
                roam: true, // 是否开启鼠标缩放和平移漫游
                // roam : 'scale',
                scaleLimit: { //滚轮缩放的极限控制
                    min: 1,
                    max: 12
                },
                zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
                label: {
                    show: false
                },
                itemStyle: {
                    areaColor: "#d5e8f3",
                    borderColor: "#fcfdfe",
                    borderWidth: 1,
                    emphasis: {
                        areaColor: "#aaa",
                    },
                },
                emphasis: {  
                    // 地图区域的多边形 图形样式。
                    label: {
                        show: true,  // 显示名称
                    },
                    shadowBlur: 20,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                    borderColor: "#fff",  // 修正此处的拼写错误
                    areaColor: "#DA3A3A"
                }


            },
            series: [
                {
                    name: "地图", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
                    type: "map",
                    geoIndex: 0,
                    label: {
                        show: true,
                    },
                    // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
                    data: state.value.map(item => ({ name: item.province, value: parseInt(item.count, 10) })),
                }
            ]
        }
        myChart.clear();
        //console.log(state.value);
        myChart.setOption(options);
        
        window.addEventListener('resize', () => {
            if (myChart) {
                myChart.resize();
            }
        });
        myChart.resize();
        //地图的点击事件 ，钻取到市我就不举例了，类似的方法，点击事件可以获取到当前点击的省份的数据；
        myChart.on('click', function(params) {
            // console.log(params, '---点击地图---')
            emit('MaphospitalRecommend', params);
        })
        // myChart.on('mouseover', function(params) {
        //     console.log(params, '---鼠标移入---')
        // })
        // myChart.on('mouseout', function(params) {
        //     console.log(params, '---鼠标移出---')
        // })
    }
    </script>
    
    <style scoped lang="scss">
    .leftCard{
        width: 70%;
        height: 70%;
        #chinaMap{
        width: 150%;
        height: 900px;
        }
    }

    </style>